<template>
  <div class='meeting-people'>
    <div class="meeting-search">
      <div v-for="(item,index) in meetingsData" :key="index">
        <span class="meetings-label">{{item.label}}：</span>
        <el-input v-if="item.type=='input'" :key="index" v-model="searchInfo[item.key]" clearable :placeholder="'请输入'+item.label"></el-input>
        <!-- <el-date-picker :key="index" v-else-if="item.type=='date'" clearable v-model="value3" type="datetime" placeholder="选择日期时间" default-time="09:00:00">
        </el-date-picker> -->
        <el-select :key="index" v-else-if="item.type=='select'" clearable filterable v-model="searchInfo[item.key]" placeholder="请选择">
          <el-option v-for="(opt,optIndex) in $store.state.selectData[item.array].data" :key="optIndex" :label="opt.label" :value="opt.value"></el-option>
        </el-select>
      </div>
      <div>
        <el-button v-for="(item,index) in btnsData" :key="index" :type="item.type" class="btn-add fr" @click="item.click">{{item.label}}</el-button>
      </div>
    </div>
    <div class="meeting-p-table">
      <Table :modelData="modelData" :listData="listData" :handleSelectionChange="handleSelectionChange" :label="label"></Table>
    </div>
  </div>
</template>
<script>
import Table from '@/components/table'
export default {
  props:['label'],
  components: {Table},
  name: "",
  data() {
    return {
      searchInfo:{
        name:'',
        depId:'',
      },
      meetingsData: [
        { key: "name", label: "姓名", type: "input" },
        { key: "depId", label: "部门", type: "select",array:'departsList'}
      ],
      btnsData:[
        { label: "搜索", type: "primary", click: this.search }
      ],
      modelData:[
        // { myType: 'select'},
        { myType: "index", label: "序号" },
        { myType: "normal", prop: "name", label: "姓名" },
        { myType: "normal", prop: "jobName", label: "角色" },
        { myType: "img", prop: "headPic", label: "头像" },
        { myType: "normal", prop: "phone", label: "电话" },
        { myType: "normal", prop: "depName", label: "部门" },
        // { myType: "input", prop: "tableNum", label: "桌号" ,value:'', method:this.changeTableNum},
      ],
      listData:[],
    };
  },
  computed:{
    
  },
  methods: {
    handleSelectionChange(selection){
      var goal = selection.map(val=>{
        return {
          id:val.id,
          tableNum:val.tableNum
        }
      })
      this.$store.state.add.info.userData=goal
      // sessionStorage.setItem('userdata',this.$store.state.add.info.userData.map(val=>val.id))
    },
    search(){
      this.getListData()
    },

    getListData(){
      var params=this.searchInfo
      // if(!params.name&&!params.depId)return
      _g.apiPost('meeting/getUserList.do',params).then(res=>{
        // var goals=(this.$store.state.records.meetingPerson||[]).map(val=>val.id).join(',')
        var results=[]
        this.$store.state.records.meetingPerson.forEach(ele0=>{
          res.data.forEach(ele1=>{
            if(ele0.id===ele1.id){
              results.push(ele0)
            }
          })
        })
        this.$set(this,'listData',results)
      })
    },

    changeTableNum(scope){
      if(this.$store.state.add.info.userData&&this.$store.state.add.info.userData.length>0){
        this.$store.state.add.info.userData.forEach(ele => {
          if(ele.id==scope.row.id){
            ele.tableNum=scope.row.tableNum
          }
        });
      }
    },
    getDetail(){
      var params={
        id:_g.getRouterParams(this).id
      }
      _g.apiPost('meeting/check.do',params).then(res=>{
        this.$set(this.$store.state,'records',res.data)
      }).then(()=>{
        this.getListData()
      })
    }
  },
  created() {
    
  },
  mounted(){
    this.getDetail()
    // _g.orderMethods([this.getDetail,this.getListData])
  }
};
</script>
<style lang="scss" scoped>
.meeting-people {
  padding: 0 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  flex-direction: column;

  .meeting-search {
    margin: 15px 0;
    display: flex;
    min-height: 40px;

    > div {
      display: flex;
      margin-right: 20px;
    }
  }
  .meetings-label {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
  }
  .meetings-tab,.meeting-p-table{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  .meeting-p-table{
    overflow: auto;
  }
}
</style>